* {
    /* 初始化 取消页面的内外边距 */
    padding: 0;
    margin: 0;
    /* 修改盒模型 */
    box-sizing: border-box;
}

body {
    /* 弹性布局 让页面元素水平+垂直居中 */
    display: flex;
    align-items: center;
    justify-content: center;
    /* 让页面始终占浏览器总高 */
    height: 100vh;
    background: #222;
}

.box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: #2c2c2c;
    box-shadow: inset 0 0 5px #303030,
                inset 0 0 6px #070707,
                inset 0 0 7px #0d0d0d,
                0 0 5px #1b1b1b;
}

.box .switch-con {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: #3ee5ff;
    box-shadow: inset 0 0 7px #004a56,
                inset 0 0 6px #007688,
                inset 0 0 5px #007a8d;
    cursor: pointer;
}

.box .switch-con .switch {
    position: relative;
    display: block;
    width: 50px;
    height: 50px;
    border: 10px solid #3e3e3e;
    border-radius: 50%;

}

.box .switch-con .switch::before {
    content: '';
    position: absolute;
    top: -10%;
    left: 50%;
    width: 10px;
    height: 35px;
    border: 7px solid #3ee5ff;
    background: #3e3e3e;
    transform: translate(-50%, -50%);
    border-radius: 50px;
}

.switch-con:hover {
    background: #34c1d6;
    box-shadow: inset 0 0 5px #197887,
                inset 0 0 6px #2cb4c9,
                inset 0 0 7px #3bcae0;
}

.switch-con:hover .switch {
    background: #34c1d6;
}

.switch-con:hover .switch::before {
    border-color: #34c1d6;
}